import React from 'react'
import classnames from 'classnames'
import { connect } from 'react-redux'
// import Swiper from 'swiper'
import './pad';
import 'swiper/dist/css/swiper.min.css'
const mapStateToProps = (state) => {
    return {
    gameList: state.app.gameData,
    userInfo: state.app.userInfo
  }
}
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    openCreateGame: (gameData) => dispatch(global.allActions.appActions.openCreateGame(gameData)),
  }
}
class GamePad extends React.Component<any, any> {

  public constructor(props) {
    super(props)
  }

  public componentDidMount() {
    new Swiper ('.swiper-container', {
      // Optional parameters
      direction: 'horizontal',
      loop: false,
      pagination: {
        el: '.swiper-pagination',
      }
    })
  }

  public get pageListPaged() {
    console.warn(this.props.gameList)
    return _.chunk(this.props.gameList, 9)
  }

  checkUserInfo(e) {
    if (e.target.nodeName == 'IMG' || e.target.nodeName == 'SPAN'){
    if(!e.target.dataset.name) return
    let gameItem = _.find(this.props.gameList, (game) => {
      return game.gameName === e.target.dataset.name
    })

    if (JSON.stringify(this.props.userInfo) == '{}') {
      alert('登录过期，请重新连接!')
      const url = `${config.pre}/personalCenter/${Cookies.get('areaCode')}`
      const opt = { method: 'GET' }
      fetchJson(url, opt).then(data => {
        if (data.result == 600) {
          window.location.href = data.data //
        }
      })
    } else {
      this.props.openCreateGame(gameItem)
    }
    }
  }

  public componentDidUpdate(){
    new Swiper ('.swiper-container', {
      // Optional parameters
      direction: 'horizontal',
      loop: false,
      pagination: {
        el: '.swiper-pagination',
      }
    })
  }

  public render() {
    // const { activePageStyle, prePageStyle, nextPageStyle } = this.getPageStyle()
    let isAndroid;
    if(window.navigator) {
      if(window.navigator.appVersion.match(/Android/i)) {
          isAndroid = true
      }
    }
    let padClass = classnames({
      'gamepad-container': true,
      'is-android': isAndroid
    })
    return (
      <div className={padClass}>
        <div className="swiper-container">
          <div className="swiper-wrapper" onClick={this.checkUserInfo.bind(this)}>
            {
              this.pageListPaged.map((pageData, i) => {
                return <div className="swiper-slide gameicon-layout" key={i}>
                  {
                    pageData.map((game, _i) => {
                      const imgCname = classnames({
                        'game-icon': true,
                        'second': _i > 3
                      })
                      let imgStyle = {
                        'background-image': `url(${game.iconUrl})`
                      }
                      return <div className="pure-u-1-3 gameicon-wrapper" key={_i * 10 }  >
                         <span className="game-icon span-icon" style={imgStyle} data-name={game.gameName}></span>
                    </div>
                    })
                  }
                </div>
              })
            }
          </div>
          <div className="swiper-pagination"></div>
        </div>
        {
          this.props.gameList ? null :<div className="gamepad-progress">
            <div className="progress-wrapper">
              <img src="img/app/rotate.gif" alt="加载中"/>
              <p>游戏列表加载中...</p>
            </div>
          </div>
        }
      </div>

    )
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(GamePad)